require(['./config'], () => {
    require(['template', 'url','elevateZoom', 'header','footer','fly','float-box'], (template, url,elevateZoom,header) => {
        class Detail {
            constructor () {
                this.getData().then(() => {
                    this.render()
                    this.zoom()
                    this.addToCart()
                })
                
            }
            getData () {
                // 从地址栏拿到id，根据id请求数据
                const id = window.location.search.slice(1).split('&').reduce((obj, item) => {
                    var arr = item.split('=')
                    obj[arr[0]] = arr[1]
                    return obj
                }, {}).id
                // id在别的方法里还会使用，所以写给this，而且转成数字，更严谨
                this.id = Number(id)
                return new Promise(resolve => {
                    $.get(`${url.rap2}/api/details`, { id: this.id }, resp => {
                        if (resp.code === 200) {

                            const { details } = resp.body
                            // 由于请求的是rap2接口，所以detail里没有id
                            // 将来换成真实接口以后就不要加id
                            this.details = { ...details, id: this.id }
                            resolve()
                        }
                    })
                })
                
            }
            render () {
                // 模板里面需要this.detail的所有字段，那就展开传
                $('#goodsDetails').html(template('detailTmplate', {
                    ...this.details
                }))
            }
            // zoom(){
            //     $(".zoom-img").elevateZoom({
            //         gallery:"gal1",
            //         cursor:"crosshair",
            //         // cursor:"pointer",crosshair
            //         borderSize:"1",
            //         borderColor:"#888",
            //         // lensShape: "round",//透镜形状
            //         // zoomType: "lens",//真正的放大镜
            //         // zoomType: "inner",//透镜内置
            //         // zoomWindowFadeIn: 500,//镜头窗口淡入速度 
            //         // zoomWindowFadeOut: 500,//镜头窗口淡出速度 
            //         // lensFadeIn: 500,//透镜淡入速度 
            //         // lensFadeOut: 500//透镜淡出速度 
            //     });
            // }
            zoom(){
                $('.zoom-image').elevateZoom({
                    gallery: 'gal1', // 小图容器盒子，ul的id（不加#）
                })
            }
            addToCart(){
                $('#add-to-cart-btn').on('click',e=>{
                    this.fly(e)
                    // localStorage.setItem('cart',JSON.stringify(this.details))
                    // 在真实项目里，购物车数据需要发送后端存入数据库，但是我们这个项目里存localStorage即可
                    // 先取出来，判断购物车是否为空
                    // 没有数据得到null
                    let cart = localStorage.getItem('cart')
                    
                    if (cart) {
                        // 有数据
                        cart = JSON.parse(cart)
                        // 判断当前数据在购物车里是否已存在
                        const isExist = cart.some(shop => {
                            return shop.id === this.details.id
                        })
                        if (isExist) {
                            // 当前商品曾经加入过购物车
                            // 数量加一即可
                            cart = cart.map(shop => {
                                if (shop.id === this.details.id) {
                                    shop.count++
                                }
                                return shop
                            })
                        } else {
                            // 当前商品这是第一次加购物车
                            // 把当前数据push进去
                            // this.detail.count = 1
                            // cart.push(this.detail)
                            cart.push({
                                ...this.details,
                                count: 1,
                                checked: true
                            })
                        }
                        // 重新再存一次
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        // 购物车为空
                        // 就只存当前这一条，但是就算只有一条，还是存数组，方便下一次存储
                        // 给this.detail默认数量为1
                        // 默认处于选中状态
                        // this.detail.count = 1
                        // var arr = [ this.detail ]
                        // localStorage.setItem('cart', JSON.stringify(arr))
                        localStorage.setItem('cart', JSON.stringify([ {
                            ...this.details,
                            count: 1,
                            checked: true
                        } ]))
                    }
                })
            }
            
            fly (e) {
                // 加入购物车时的抛物线
                $(`<img src="${this.details.imgs[0]}" style="width: 50px;height: 50px;border-radius:50%">`).fly({
                    start:{
                      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $('#cart').offset().left - $(window).scrollLeft(), //结束位置（必填）
                      top: $('#cart').offset().top - $(window).scrollTop() //结束位置（必填）
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        this.destroy()
                        // 调用header里封装好的方法重新计算数量
                        header.calcCartTotal()
                    }
                  })
            }
            
        }
        new Detail()
    })
})
